<template>
	<div class="c-c-panel">
		<div class="c-c-user-view">
			<div class="c-c-user">
				<CUserItem :data="data.user">
				</CUserItem>
			</div>
			<span class="c-c-time" v-text="data.createTimeFormat"></span>
		</div>
		<!-- if type is 2, then display trend's title -->
		<div class="c-c-title-view" v-if="data.type == 2">
			<span class="c-c-diary-label">日记</span>
			<span v-text="data.title"></span>
		</div>
		
		<!-- if type is 1 or 3, then display trend's content -->
		<div class="c-c-content-view" 
			v-if="data.type == 1 || data.type == 3">
			<span class="c-c-content" v-text="data.content"></span>
		</div>

		<!-- if trend has images, then display images -->
		<div class="c-c-imgs" v-if="data.imgs != null && data.imgs != ''">
			<CTrendImages :data="data.imgs == null || data.imgs == '' ? [] : JSON.parse(data.imgs)">
			</CTrendImages>
		</div>

		<!-- if type is 3, then display forward trend -->
		<div class="c-c-forward-view" v-if="data.type == 3">
			<div class="c-c-title-view" 
				v-if="data.forwardTrend != null && data.forwardTrend.type == 2">

				<span class="c-c-forward-username"
					v-text="data.forwardTrend.user.name"></span>
				<span class="c-c-forward-username">：</span>

				<span class="c-c-diary-label">日记</span>
				<span v-text="data.forwardTrend.title"></span>
				
			</div>
			
			<!-- if type is 1 or 3, then display trend's content -->
			<div class="c-c-content-view" 
				v-if="data.forwardTrend.type == 1 || data.forwardTrend.type == 3">
				<span class="c-c-forward-username"
					v-text="data.forwardTrend.user.name"></span>
				<span class="c-c-forward-username">：</span>
				
				<span class="c-c-content" v-text="data.forwardTrend.content" ></span>
				
			</div>
	
			<!-- if trend has images, then display images -->
			<div class="c-c-imgs" v-if="data.forwardTrend.imgs != null && data.forwardTrend.imgs != ''">
				<CTrendImages :data="data.forwardTrend.imgs == null || 
						data.forwardTrend.imgs == '' ? [] : JSON.parse(data.forwardTrend.imgs)"
						>
				</CTrendImages>
			</div>
		</div>
		
		<!-- display trend count -->
		<div class="c-c-count-view">
			<div class="c-c-count-item-view">
				<span>赞</span>
				<span v-text="data.likeCount"></span>
			</div>
			<div class="c-c-count-item-view">
				<span>转发</span>
				<span v-text="data.shareCount"></span>
			</div>
			<div class="c-c-count-item-view">
				<span>评论</span>
				<span v-text="data.commentCount"></span>
			</div>
		</div>
		
	</div>
</template>

<script>
	import CUserItem from '@/components/CUserItem.vue';
	import CTrendImages from '@/components/CTrendImages.vue';

	export default {
		name: 'CTrendItem',
		data() {
			return {}
		},
		methods: {
		},
		components: {
			CUserItem,
			CTrendImages
		},
		props: ['data']
	}
</script>

<style>
	.c-c-panel {
		background-color: #FFFFFF;
	}
	
	.c-c-user-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		margin-bottom: 10px;
		padding: 20px 20px 0px 20px;
	}
	
	.c-c-user {
		flex: 1;
		-webkit-flex: 1;
	}
	
	.c-c-title-view {
		font-size: 15px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 0px 20px 0px 20px;
	}
	
	.c-c-diary-label {
		background-color: #FF6D00;
		border-radius: 3px;
		padding: 2px 6px;
		color: #FFF;
		font-size: 13px;
		margin-right: 5px;
	}
	
	.c-c-content-view {
		margin-bottom: 10px;
		margin-bottom: 10px;
		padding: 0px 20px 0px 20px;
	}
	
	.c-c-content {
		font-size: 15px;
		color: #000000;
		opacity: 0.87;
	}
	
	.c-c-imgs {
		margin-bottom: 10px;
		padding: 0px 20px 0px 20px;
	}
	
	.c-c-time {
		float: right;
		color: #000000;
		opacity: 0.54;
		font-size: 12px;
	}
	
	.c-c-forward-view {
		background-color: #F2F2F2;
		padding: 20px 0px 10px 0px;
		margin: 0px 20px 10px 20px;
	}
	
	.c-c-forward-username {
		color: #3399FF;
		font-size: 15px;
	}
	
	.c-c-count-view {
		display: flex;
		display: -webkit-flex;
		height: 40px;
		align-items: center;
		border-top: 1px solid #E6E6E6;
	}
	
	.c-c-count-item-view {
		flex: 1;
		-webkit-flex: 1;
		text-align: center;
		font-size: 15px;
		color: #000000;
		opacity: 0.54;
	}
</style>